<template>
  <div class="mvinfo">
    <div class="mvinfo_left">
      <!--  -->
      <div class="header">
        <div class="header_a">
          <span></span>
          <h2>{{ MVList.name }}</h2>
        </div>
        <div class="header_b">
          <span v-for="(v, i) in MVList.artists" :key="i"
            ><span v-if="i > 0">&nbsp;/&nbsp;</span
            ><router-link :to="`/singerInfo/${v.id}`">{{
              v.name
            }}</router-link></span
          >
        </div>
      </div>
      <!-- 播放器 -->
      <div class="content">
        <div class="content_a">
          <video :src="MVUrl" controls autoplay></video>
        </div>
        <ul class="content_b">
          <li>点赞</li>
          <li>转发({{ MVList.shareCount }})</li>
          <li>收藏({{ MVList.subCount }})</li>
        </ul>
      </div>
      <!-- 评论 -->
      <div class="comment">
        <Comment :mvinfo="mvinfo"></Comment>
      </div>
    </div>
    <div class="mvinfo_right">
      <!-- MV简介 -->
      <div class="brief">
        <div class="brief_a">
          <h3>MV简介</h3>
        </div>
        <div class="brief_b">
          <div class="brief_b_info">
            <span>发布时间：{{ MVList.publishTime }}</span>
            <span>播放次数：{{ changenumber(MVList.playCount) }}次</span>
          </div>
          <div class="brief_b_content">
            {{ MVList.desc }}
          </div>
        </div>
      </div>
      <!-- 相似MV -->
      <div class="similar">
        <div class="similar_a">
          <h3>相似MV</h3>
        </div>
        <ul class="similar_b">
          <li v-for="(v, i) in SimilarList" :key="i">
            <div class="similar_b_img">
              <router-link :to="`/mvInfo/${v.id}`"><img :src="v.cover" /></router-link>
            </div>
            <div class="similar_b_info">
              <div class="qwe_a">
                <router-link :to="`/mvInfo/${v.id}`">{{ v.name }}</router-link>
              </div>
              <div class="qwe_b">{{ changetime(v.duration) }}</div>
              <div class="qwe_c">
                <span v-for="(q, w) in v.artists" :key="w"
                  ><span v-if="w > 0">/</span
                  ><router-link :to="`/singerInfo/${q.id}`">{{ q.name }}</router-link></span
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import Comment from "../components/Comment.vue";
export default {
  components: { Comment },
  data() {
    return {
      mvinfo: true,
      MVList: {},
      MVUrl: "",
      SimilarList: {},
    };
  },
  methods: {
    // 获取MV数据
    getMVList() {
      axios
        .get(`http://127.0.0.1:3000/mv/detail?mvid=${this.$route.params.id}`)
        .then((res) => {
          this.MVList = res.data.data;
        });
    },
    // 获取MV地址
    getMVUrl() {
      axios
        .get(`http://127.0.0.1:3000/mv/url?id=${this.$route.params.id}`)
        .then((res) => {
          this.MVUrl = res.data.data.url;
        });
    },
    // 获取相似MV数据
    getSimilarList() {
      axios
        .get(`http://127.0.0.1:3000/simi/mv?mvid=${this.$route.params.id}`)
        .then((res) => {
          this.SimilarList = res.data.mvs;
        });
    },
    // 转化播放次数
    changenumber(e){
      if(e<100000){
        return e
      }else{
       return Math.floor(e / 10000)+"万"
      }
    },
    // 转化时间戳
     changetime(e) {
      let m =
        Math.floor(e / 1000 / 60) > 9
          ? Math.floor(e / 1000 / 60)
          : "0" + Math.floor(e / 1000 / 60);
      let s =
        Math.floor(e / 1000 - m * 60) > 9
          ? Math.floor(e / 1000 - m * 60)
          : "0" + Math.floor(e / 1000 - m * 60);
      return m + ":" + s;
    },
  },
  created() {
    this.getMVList();
    this.getMVUrl();
    this.getSimilarList();
  },
};
</script>
<style scoped>
.mvinfo {
  display: flex;
  width: 980px;
  margin: 0 auto;
  background-color: #fff;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
}
.mvinfo > .mvinfo_left {
  width: 710px;
  padding: 47px 30px 40px 39px;
  border-right: 1px solid #d3d3d3;
}
.mvinfo > .mvinfo_right {
  width: 270px;
  padding: 20px 40px 40px 30px;
}
.header {
  margin-bottom: 10px;
}
.header > .header_a {
  display: flex;
  align-items: center;
}
.header > .header_a > span {
  width: 29px;
  height: 18px;
  background: url("../../public/images/icon2.png") no-repeat -230px -480px;
}
.header > .header_a > h2 {
  font-size: 24px;
  font-weight: 400;
  padding-left: 5px;
}
.header > .header_b > span {
  font-size: 1px;
}
.header > .header_b > span:nth-child(1) {
  margin-left: 10px;
}
.header > .header_b > span > a {
  font-size: 12px;
  color: #0c73c2;
}
.header > .header_b > span > a:hover {
  text-decoration: underline;
}

/* 播放器 */
.content > .content_a > video {
  width: 640px;
  height: 360px;
}
.content > .content_b {
  display: flex;
  margin-top: 10px;
  font-size: 12px;
}
.content > .content_b > li {
  background-color: #f2f2f2;
  padding: 3px 5px;
  border: 1px solid #c3c3c3;
  margin-right: 5px;
  cursor: pointer;
  border-radius: 3px;
}
.content > .content_b > li:hover {
  background-color: #fcfcfc;
}
/* 评论 */
.comment {
  margin-top: 40px;
}
/* MV简介 */
.brief > .brief_a {
  padding-bottom: 8px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 20px;
}
.brief > .brief_a > h3 {
  font-size: 12px;
}
.brief > .brief_b {
  font-size: 12px;
}
.brief > .brief_b > .brief_b_info {
  display: flex;
  flex-wrap: wrap;
  color: #999999;
  margin-bottom: 10px;
}
/* 相似MV */
.similar > .similar_a {
  padding-bottom: 8px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 20px;
  margin-top: 40px;
}
.similar > .similar_a > h3 {
  font-size: 12px;
}
.similar_b > li {
  margin-bottom: 15px;
  display: flex;
}
.similar_b > li > .similar_b_img > a > img {
  width: 96px;
  height: 54px;
}
.similar_b > li > .similar_b_info {
  width: 99px;
  margin-left: 5px;
}
.similar_b > li > .similar_b_info > .qwe_a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.similar_b > li > .similar_b_info > .qwe_a > a {
  font-size: 12px;
}
.similar_b > li > .similar_b_info > .qwe_a > a:hover {
  text-decoration: underline;
}
.similar_b > li > .similar_b_info > .qwe_b {
  font-size: 12px;
  color: #b5b5b5;
}
.similar_b > li > .similar_b_info > .qwe_c {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b5b5b5;
}
.similar_b > li > .similar_b_info > .qwe_c > span > span {
  font-size: 1px;
  color: #b5b5b5;
}
.similar_b > li > .similar_b_info > .qwe_c > span > a {
  font-size: 12px;
  color: #b5b5b5;
}
.similar_b > li > .similar_b_info > .qwe_c > span > a:hover {
    text-decoration: underline;
}
</style>